<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tea TodoList 前端演示</title>
</head>
<body>
<h1>Tea TodoList 演示</h1>
<p>在这里，你可以快速演示注册、登录、操作 TodoList 等操作。</p>

<!-- 全局存储 token -->
<script>
  let globalToken = "";
  let baseUrl = "http://localhost:8080"; // 根据实际情况修改
</script>

<!-- 注册 -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>注册</h3>
  <p>Username: <input type="text" id="reg_username"/></p>
  <p>Password: <input type="password" id="reg_password"/></p>
  <button onclick="doRegister()">注册</button>
  <pre id="reg_result"></pre>
</div>

<!-- 登录 -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>登录</h3>
  <p>Username: <input type="text" id="login_username"/></p>
  <p>Password: <input type="password" id="login_password"/></p>
  <button onclick="doLogin()">登录</button>
  <p>获取到的token: <span id="login_token"></span></p>
  <pre id="login_result"></pre>
</div>

<!-- 创建Todo -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>创建 Todo (需要token)</h3>
  <p>Content: <input type="text" id="create_todo_content"/></p>
  <button onclick="doCreateTodo()">创建</button>
  <pre id="create_todo_result"></pre>
</div>

<!-- 更新Todo -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>更新 Todo (需要token)</h3>
  <p>Todo ID: <input type="text" id="update_todo_id"/></p>
  <p>New Content: <input type="text" id="update_todo_content"/></p>
  <button onclick="doUpdateTodo()">更新</button>
  <pre id="update_todo_result"></pre>
</div>

<!-- 删除Todo -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>删除 Todo (需要token)</h3>
  <p>Todo ID: <input type="text" id="delete_todo_id"/></p>
  <button onclick="doDeleteTodo()">删除</button>
  <pre id="delete_todo_result"></pre>
</div>

<!-- 查看单条 Todo -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>查看单条 Todo</h3>
  <p>Todo ID: <input type="text" id="get_todo_id"/></p>
  <button onclick="doGetTodo()">查看</button>
  <pre id="get_todo_result"></pre>
</div>

<!-- 查看所有 Todo -->
<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
  <h3>查看所有 Todo</h3>
  <button onclick="doListTodos()">查看全部</button>
  <pre id="list_todos_result"></pre>
</div>

<script>
  // ========== 注册 ==========
  async function doRegister() {
    const username = document.getElementById("reg_username").value;
    const password = document.getElementById("reg_password").value;
    const url = baseUrl + "/public/register";

    let respText = "";
    try {
      const resp = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          username: username,
          password: password
        })
      });
      respText = await resp.text();
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("reg_result").textContent = respText;
  }

  // ========== 登录 ==========
  async function doLogin() {
    const username = document.getElementById("login_username").value;
    const password = document.getElementById("login_password").value;
    const url = baseUrl + "/public/login";

    let respText = "";
    try {
      const resp = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          username: username,
          password: password
        })
      });
      respText = await resp.text();
      // 如果成功，会返回 BaseResponse<String> 的 JSON，如 {"code":20000,"message":"ok","data":"12345678"}
      // 这里解析一下
      const jsonResp = JSON.parse(respText);
      if(jsonResp.code === 20000){
        globalToken = jsonResp.data;
        document.getElementById("login_token").textContent = globalToken;
      }
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("login_result").textContent = respText;
  }

  // ========== 创建Todo ==========
  async function doCreateTodo() {
    const content = document.getElementById("create_todo_content").value;
    const url = baseUrl + "/auth/todo";

    let respText = "";
    try {
      const resp = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Auth": globalToken // 在header中带上token
        },
        body: JSON.stringify({
          content: content
        })
      });
      respText = await resp.text();
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("create_todo_result").textContent = respText;
  }

  // ========== 更新Todo ==========
  async function doUpdateTodo() {
    const todoId = document.getElementById("update_todo_id").value;
    const newContent = document.getElementById("update_todo_content").value;
    const url = baseUrl + "/auth/todo";

    let respText = "";
    try {
      const resp = await fetch(url, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          "Auth": globalToken
        },
        body: JSON.stringify({
          id: Number(todoId),
          content: newContent
        })
      });
      respText = await resp.text();
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("update_todo_result").textContent = respText;
  }

  // ========== 删除Todo ==========
  async function doDeleteTodo() {
    const todoId = document.getElementById("delete_todo_id").value;
    const url = baseUrl + "/auth/todo?id=" + todoId;

    let respText = "";
    try {
      const resp = await fetch(url, {
        method: "DELETE",
        headers: {
          "Auth": globalToken
        }
      });
      respText = await resp.text();
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("delete_todo_result").textContent = respText;
  }

  // ========== 查看单个Todo ==========
  async function doGetTodo() {
    const todoId = document.getElementById("get_todo_id").value;
    const url = baseUrl + "/public/todo?id=" + todoId;

    let respText = "";
    try {
      const resp = await fetch(url);
      respText = await resp.text();
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("get_todo_result").textContent = respText;
  }

  // ========== 查看所有Todo ==========
  async function doListTodos() {
    const url = baseUrl + "/public/todos";
    let respText = "";
    try {
      const resp = await fetch(url);
      respText = await resp.text();
    } catch (e) {
      respText = "请求失败: " + e;
    }
    document.getElementById("list_todos_result").textContent = respText;
  }
</script>

</body>
</html>